<template>
  <div>
    <listPage
    ref="listPageRef"
    pageTitle="网络隔离"
    :btnList="btnList"
    :addBtnList="addBtnList"
    :tableData="tableData"
    :allColumn="tableColumn"
    :tableColumn="showColumn"
    @setColumn="(val)=>{showColumn=val}"
    ></listPage>
      <!-- 编辑弹窗 -->
      <pdlog v-model="showEdit" width="943px" title="添加" @comfirm="showEdit = false" @cencel="showEdit = false">
        <div class="edit-dialog">
          <div class="name">路由名称</div>
          <el-input class="w233" size="small" v-model="editValue" placeholder="请输入"></el-input>
        </div>
        <div class="edit-dialog">
        <pform ref="form" :model="form" lw="150">
          <el-form-item label="所属VPC">
            <el-select  v-model="form.field1" placeholder="请选择">
              <el-option label="vpc名称" value="dn"></el-option>
            </el-select>
          </el-form-item>
        </pform>
      </div>
        <div class="edit-dialog">
          <div class="name">描述</div>
          <el-input type="textarea" :autosize="{ minRows: 4}" v-model="editValue" placeholder="请输入"></el-input>
        </div>
        <div class="edit-dialog">
          <div class="name">添加路由</div>
          <el-table
          :data="tableData1"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="目的地址类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="目的地址"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="下一个类型">
          </el-table-column>
          <el-table-column
            prop="address1"
            label="下一跳">
          </el-table-column>
          <el-table-column
            prop="address2"
            width="180"
            label="描述">
          </el-table-column>
        </el-table>
      
      </div>
      <div class="edit-dialog" style="width: 100%">
        <div class="name"></div>  
        <div style="width: 100%">
         
          <div class="flex-t" v-show="hasTag">
            <el-input size="small" style="width:100px; margin-right: 15px;" v-model="form.field10" placeholder="ip地址"></el-input>
            <el-input size="small" style="width:100px; margin-right: 15px;" v-model="form.field10" placeholder="请输入"></el-input>
    
            <el-select  style="width:100px; margin-right: 15px;"  v-model="value2" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value2"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select  style="width:100px; margin-right: 15px;"  v-model="value3" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value3"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input size="small" style="width:128px; margin-right: 15px;" v-model="form.field10" placeholder="请输入"></el-input>
            <!-- <pbtn class="mr15" iname="minus"></pbtn> -->
            <i class="el-icon-delete"  @click="hasTag=false"></i>   
          </div>
          <div class="flex-t">
            <el-button  @click="hasTag=true">添加标签</el-button>
          </div>
        </div>
        </div>
      </pdlog>
    <!-- 消息弹窗 -->
    <pdlog v-model="showTip" width="418px" :title="tipName" @comfirm="showTip = false" @cencel="showTip = false">
      <div class="btn-msg">
        请确认是否进行{{tipName}}？
      </div>
    </pdlog>
  </div>
</template>

<script>
  import listPage from '@/components/listPage'
  import {getNetsafeIsolation} from '@/api/pageList'

  export default {
    data() {
      return {
        tipName:'',
        showTip:false,
        hasTag:false,
        form: {
          field1:'',},
        addBtnList:[{
            id:1,
            name:'创建网络路由',
            handle:this.handleEdit
          }],
          
        btnList:[
          {
            id:1,
            name:'删除',
            handle:()=>this.handleClick('删除')
          },
        ],
        options: [
          
        ],
        showLog: false, // 控制台弹窗
        logValue: null, // 控制台值
        editValue: null, // 编辑值
        showEdit: false, // 编辑弹窗
        showColumn: [], // 展示列
        tableColumn: [{
            field: "name",
            label: "名称",
          },
          {
            field: "id",
            label: "ID",
          },
          {
            field: "cloud_vpc",
            label: "虚拟云VPC",
            sortable: true
          },
          {
            field: "type",
            label: "类型",
            sortable: true

          },
          {
            field: "subnet_involved",
            label: "涉及子网",
            sortable: true
          },
        ],
        tableData: [],
         tableData1: [{
            date: 'local',
            name: 'local',
            address: 'local',
            address1: 'local',
            address2: '系统默认，表示VPC内实例互通，无网络隔离'
          },],
       
        
        options2:[{
          value: '选项1',
          label: '服务器实例'
        }, {
          value: '选项2',
          label: '虚拟防火墙'
        }, {
          value: '选项3',
          label: '裸金属服务器自定义网络'
        }, {
          value: '选项4',
          label: 'vpn网关'
        },],
        options3:[{
          value: '选项1',
          label: '前一个下拉框的对应资源'
        }, ],
        value2: '',
        value2: ''
      }
    },
    components: {
      listPage
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        this.showColumn = this.tableColumn
        this.getData()
      },
      getData(params={}){
        console.log('~~~~~~~~~',params)
        // 请求
        getNetsafeIsolation().then(res => {
          if(res.code==200){
            let data = JSON.parse(res.data)
            this.tableData = data
            console.log('~~~~~~',this.tableData);
          }
        })
      },
      handleAdd() {
        console.log('跳转新增页');
        // this.$router.push({
        //   path: '/physical/physicalMachineAdd'
        // })
      },
      selectedData(){
        return this.$refs.listPageRef.getSelectedData()
      },
      handleClick(name) {
        this.tipName = name
        // 获取选中数据
        let selectRow = this.selectedData()
        console.log('@@@@@@',)
        this.showTip = true

        // this.$axios.get('http://47.95.194.212:6601/api/physical').then(res=>{
        //   console.log('@@@@@',res)
        // })
      },
      handleccc() {
        console.log('6666666666666');
      },
      setTable() {
        this.$refs.settingTable.init()
      },
      handleLog(index, row) {
        console.log(index, row);
        this.showLog = true
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.showEdit = true
      },
      handleDetail(index, row) {
        console.log(index, row);
      },
    }
  }
</script>

<style scoped lang="less">

  .edit-dialog {
    margin: 0px 20px 10px;
    display: flex;
    align-items: center;
    .name {
      font-weight: 650;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      margin-right: 35px;
      width: 100px;
    }
    .el-input {
      width: 233px;
    }
  }
  .flex-t{
    display:flex;
    justify-content:space-evenly;
    align-items: center;
  }
</style>
